<template>
	<div id="Home">
		<el-container>
  			<el-header>
  				<span class="logo">logo</span>
  				<el-button  type="danger" 
  					style="width: 40px;height: 40px;margin-right:20px;font-size: 18px;margin-top: 10px;"
  					round 
  					size="mini"
  					@click="signOut"
  				>
  					<i class="fa fa-sign-out"></i>
  				</el-button>
  			</el-header>
 	 		<el-container>
    			<el-aside width="200px">
    				<!--导航栏组件-->
    				<!--创建NavMenu.vue-->
    				<nav-menu></nav-menu>
    			</el-aside>
    			<el-main>
    				<router-view></router-view>
    			</el-main>
  			</el-container>
		</el-container>
	</div>
</template>

<script>
//	导入NavMenu
import NavMenu from './NavMenu'
export default{
	components: {NavMenu},	//注册子组件,并添加子组件标签
	methods:{
		signOut(){
			var action = ()=>{
				localStorage.clear();
				this.$router.push('/Signin');
			}
			this.operatorConfirm(action,"退出");
		}
	}
}
</script>

<style lang="scss" scoped>
#Home{
	width: 100%;
	height: 100%;
	.el-container {
		height: 100%;
		.el-header, .el-footer {
			padding: 0;
		    background-color: #DCDDCB;
		    color: #333;
		    text-align: center;
		    line-height: 60px;
	  	}
	  	.el-header{
	  		display: flex;
	  		flex-direction: row;
	  		justify-content: space-between;
	  		.logo{
	  			width: 200px;
	  			height: 100%;
	  			font-size: 22px;
	  		}
	  	}
	  	.el-aside {
		    background-color: #D3DCE6;
		    color: #333;
		    text-align: center;
		    height: 100%;
	  	}
	  
	  	.el-main {
		    background-color: #E9EEF3;
		    color: #333;
		    text-align: center;
		    height: 100%;
	  	}
    
  	}
 
}
</style>